<template>
<!-- 店铺 -->
  <div class="container-box">
    <div class="menu1css"><el-button size="small"  @click="dialogFormVisible = true" type="primary">新增店铺</el-button>
    </div>
    <el-table
      :header-cell-style="tableHeaderColor"
      :data="tableData"
      size="mini"
      border
      style="width: 100%"
    >
      <el-table-column prop="id" label="店铺id" width="100"></el-table-column>
      <el-table-column prop="idtwo" label="员工id" width="100"></el-table-column>
      <el-table-column prop="username" label="员工姓名" width="120"></el-table-column>
      <el-table-column prop="store" label="店铺名" width="300"></el-table-column>
      <el-table-column prop="day_up_goods" label="每日上新" width="120"></el-table-column>
      <el-table-column prop="day_flow" label="每日流量" width="120"></el-table-column>
      <el-table-column prop="day_orders" label="每日订单量" width="120"></el-table-column>
      <el-table-column prop="total_flow" label="总流量" width="120"></el-table-column>
      <el-table-column label="操作">
        <el-button type="info" size="mini">详情</el-button>
        <el-button type="primary" size="mini">修改</el-button>
        <el-button type="danger" size="mini" @click="ondelete">删除</el-button>
      </el-table-column>
    </el-table>
    <div style="position: fixed;
    bottom: 0;right: 0;"><pagination
      @sendPageSize="receivePageSize"
      @sendCurrentPage="receiveCurrentPage"
      :totalPage="totalPage"
    ></pagination></div>
    
<el-dialog title="新增店铺" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="员工">
      <el-input v-model="form.date1" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="店铺名" :label-width="formLabelWidth">
      <el-input v-model="form.date2" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="refer">确 定</el-button>
  </div>
</el-dialog>
  </div>
  
</template>
<script>
import pagination from "common/pagination";
import axios from "axios";
import html from "../../api/src"

export default {
  data() {
    return {
        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          date1: '',
          date2: '',
        },
      totalPage: 300,
      tableData: [],
      value: "",
      input2: "",
      DateValue: "",
      dialogTableVisible: false,
      dialogFormVisible: false,
    };
  },
  created(){
  axios({
    method: "get",
    url: html.domain + 'store/storelist/',
         })
    .then((res) => {
      console.log(res)
      let numid,
      numtwoid,
      usernames,
      stores, 
      days_up_goods, 
      days_flow, 
      days_orders, 
      total_flows;
      this.totalPage = res.data.count;
      for( let i = 0; i<res.data.results.length; i++){
        // this.tableData.id = res.data.results[i].id
       numid = res.data.results[i].id;
       numtwoid = res.data.results[i].staff.id;
       usernames = res.data.results[i].staff.username;
       stores = res.data.results[i].store;
       days_up_goods = res.data.results[i].day_up_goods;
       days_flow = res.data.results[i].day_flow;
       days_orders = res.data.results[i].day_orders;
       total_flows = res.data.results[i].total_flow;
         this.tableData.push({
          id : numid,
          idtwo: numtwoid,
          username:usernames,
          store: stores,
          day_up_goods: days_up_goods,
          day_flow: days_flow,
          day_orders: days_orders,
          total_flow: total_flows
      });
      }
    })
  },
  methods: {
    refer(){
      console.log(this.form.date1)
      console.log(this.form.date2)
        axios({
        method:"post",
        url: html.domain + 'store/newstoreadd/',
        data:{
          staff: this.form.date1,
          store: this.form.date2,
        }
        })
        .then((res) => {
          console.log(res)
        })
        this.dialogFormVisible = false 
    },
    receivePageSize(val) {
      console.log(val);
    },
    receiveCurrentPage(val) {
      console.log(val);
    },
    // 修改table header的背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color: #F7F6Fd;color: #B6B5C2;font-weight: 500;";
      }
    },
    // 删除
    ondelete(){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        }
      );
    }
  },
  watch: {
    DateValue(newval, oldval) {
      console.log(newval);
      console.log(oldval);
    }
  },
  components: {
    pagination
  }
};
</script>

<style scoped lang="scss">
@import "../../assets/css/them.scss";
.container-box {
  .form-box {
    padding: 10px 20px;
    border-bottom: 1px solid #ccc;
    .input-box {
      margin-bottom: 20px;
    }
    .input-label div {
      padding: 0px !important;
    }
    .input-label .label {
      margin-top: 4px;
    }
  }
  .button-box {
    margin: 50px;
  }
  .menucss{
    padding-left: 5px;
    width: 200px;
    padding: 5px 0 5px 5px;
  }
  .menu1css{
    float: right;
    padding: 5px 5px 5px 0;
  }
}
</style>